<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <input type="text" v-test:1>
        <router-link to="/home">home</router-link>
        <router-link to="/list">list</router-link>
        <router-link to="/set">set</router-link>
        <!-- a标签 -->
        <router-view></router-view>

        <!-- 占位符，盛放组件 -->
    </div>
    <script>
        // let box = document.querySelector('#box');
        // window.onhashchange = function(){
        //     if(location.hash === '#/my'){
        //         box.innerHTML = 'my';
        //     }else if(location.hash === '#/list'){
        //         box.innerHTML = 'list'
        //     }
        //     console.log(location.hash)
        // }
    </script>
    <script src="./vue.js"></script>
    <script src="./vue-router.js"></script>

    <script>
        console.log(VueRouter);
        Vue.directive('test',function(el,binding){
            console.log(binding.arg)
        })
        // 定义组件对象
        let home = {
            template:'<div>{{msg}}</div>',
            data(){
                return {
                    msg:'home'
                }
            },
            beforeDestroy() {
                console.log('home销毁前');
                console.log(this.$el)
            },
            destroyed() {
                console.log('home销毁完成');
                console.log(this.$el) 
            }
        };

        let list = {
            template:'<div>list</div>',
            beforeDestroy() {
                console.log('list销毁前')
            },
            destroyed() {
                console.log('list销毁完成')   
            }
        }

        let set = {
            template:'<div>set</div>'
        }

        let error = {
            template:'<div>此页面不存在</div>'
        }
        // 创建路由实例
        let router = new VueRouter({
            // 定义路由规则
            routes:[
                {
                    path:'/',
                    redirect:'/home'
                },
                {
                    path:'/home',
                    component:home
                },
                {
                    path:'/list',
                    component:list
                },
                {
                    path:'/set',
                    component:set
                },
                {
                    path:'*',
                    component:error
                }
            ]
        })

        //在vue实例配置路由
        let vm = new Vue({
            el:'#app',
            router,
            data:{
                list:[1,2,3],
                status:true
            }
        })
    </script>
</body>
</html>